<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="card-title">{{ title }}</span>
        <el-button style="float: right" size="mini" type="primary" @click="() => handleSave(false)">保存</el-button>
        <el-button style="float: right; margin-right: 10px" size="mini" v-if="!this.id"
          @click="() => handleSave(true)">保存并新增</el-button>
      </div>
      <div class="text item">
        <div>
          <el-form :model="supplier" :rules="rules" size="small" ref="supplierForm" label-width="100px"
            label-position="left">
            <el-row :gutter="20">
              <el-col :span="8"><el-form-item label="编号" prop="code">
                  <el-input v-model="supplier.code"></el-input>
                </el-form-item></el-col>
              <el-col :span="8"> <el-form-item label="名称" prop="name">
                  <el-input v-model="supplier.name"></el-input>
                </el-form-item></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8"><el-form-item label="国家" prop="country">
                  <el-input v-model="supplier.country"></el-input>
                </el-form-item></el-col>
              <el-col :span="8"> <el-form-item label="地区" prop="region">
                  <el-input v-model="supplier.region"></el-input>
                </el-form-item></el-col>
              <el-col :span="8"> <el-form-item label="通讯地址" prop="mailAddress">
                  <el-input v-model="supplier.mailAddress"></el-input>
                </el-form-item></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8"><el-form-item label="邮编" prop="postalCode">
                  <el-input v-model="supplier.postalCode"></el-input>
                </el-form-item></el-col>
              <el-col :span="8"> <el-form-item label="固定电话" prop="telephone">
                  <el-input v-model="supplier.telephone"></el-input>
                </el-form-item></el-col>
              <el-col :span="8"> <el-form-item label="激活" prop="activated">
                  <el-switch v-model="supplier.activated"> </el-switch>
                </el-form-item></el-col>
            </el-row>
          </el-form>
        </div>
        <el-divider></el-divider>
        <div>
          <div>供应商联系人 </div>
          <div><el-button type="primary" size="mini" @click="() => handleContactEdit()">新增</el-button><el-button
              type="danger" size="mini" @click="handleContactDelete">删除</el-button>
          </div>
          <div>
            <el-table :data="supplier.contactItems" style="width: 100%" @row-dblclick="handleContactClick"
              ref="contactTable">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="jobTitle" label="职务" width="120">
              </el-table-column>
              <el-table-column prop="telephone" label="固定电话" width="120">
              </el-table-column>
              <el-table-column prop="mobilephone" label="移动电话" width="120">
              </el-table-column>
              <el-table-column prop="email" label="电子邮件">
              </el-table-column>
            </el-table>
            <el-drawer direction="rtl" :append-to-body="true" :visible.sync="editContactDrawer" :with-header="false"
              style="overflow: auto">
              <contact-edit v-if="editContactDrawer" :contact="currentContact"
                @change="(contact, close) => handleContactChange(contact, close)"></contact-edit>
            </el-drawer>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getSupplier, addSupplier, updateSupplier } from "@/api/supplier";
import contactEdit from "./contactEdit.vue"
export default {
  components: {
    contactEdit
  },
  data() {
    return {
      supplier: {
        id: "",
        code: "",
        name: "",
        country: null,
        region: null,
        mailAddress: null,
        postalCode: null,
        telephone: null,
        activated: true,
        contactItems: []
      },
      rules: {
        code: [{ required: true, message: "请填写编号", trigger: "blur" }],
        name: [{ required: true, message: "请填写名称", trigger: "blur" }]
      },
      title: "",
      editContactDrawer: false,
      currentContact: {}
    };
  },
  methods: {
    getData() {
      if (!this.id) return;
      getSupplier(this.id).then((res) => {
        this.supplier = res || {};
      });
    },
    handleSave(afterAdd) {
      this.$refs.supplierForm.validate((valid) => {
        if (valid) {
          this.saveData(afterAdd);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveData(afterAdd) {
      if (!this.id) {
        addSupplier(this.supplier).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.supplier = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      } else {
        updateSupplier(this.supplier).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.customer = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      }
    },
    handleContactEdit(contact) {
      this.currentContact = contact || {};
      this.editContactDrawer = true;
    },
    handleContactChange(contact, close) {
      let match = this.supplier.contactItems.find(x => x.id == contact.id)

      if (!match)
        this.supplier.contactItems.push(contact);
      else {
        match.name = contact.name;
        match.telephone = contact.telephone;
        match.mobilephone = contact.mobilephone
        match.email = contact.email;
        match.jobTitle = contact.jobTitle
      }

      this.editContactDrawer = !close;
    },
    handleContactClick(contact) {
      this.handleContactEdit(contact)
    },
    handleContactDelete() {
      let selectItems = this.$refs.contactTable.selection

      if (!selectItems || selectItems.length == 0)
        return;

      for (let i = 0; i < selectItems.length; i++) {
        this.supplier.contactItems = this.supplier.contactItems.filter(x => x.id != selectItems[i].id);
      }
    }
  },
  mounted() {
    this.title = this.id ? "编辑" : "新增";
    this.getData();
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped></style>
